<template>
	<view class="box">
		<view class="back">
			<image src="/static/login/back.png" mode="" class="back-img" @click="goback"></image>
		</view>
		<!-- #ifdef H5 -->
		<view class="command-box" v-if="isCommand">
			<image src="/static/login/command.png" mode="" class="img"></image>
			<view class="know" @tap="isCommand=false">知道了</view>
		</view>
		<!-- #endif -->
		<view class="top">
			<image src="/static/login/tx-title.png" mode="" class="log-img"></image>
		</view>
		<view class="cart-box">
			<image src="/static/login/txxzBkg.png" mode="" class="cart-img"></image>
		</view>
		<!-- #ifdef APP-PLUS -->
		<view class="content">
			<view class="item1" @tap="downloadApp(1)">
				<image src="/static/login/android.png" mode="" class="img"></image>
				<view class="text">Android下载</view>
			</view>
			<view class="item2" @tap="downloadApp(2)">
				<image src="/static/login/ios.png" mode="" class="img"></image>
				<view class="text">Iphone下载</view>
			</view>
		</view>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<view class="content">
			<view class="item1" @tap="downloadH5(1)">
				<image src="/static/login/android.png" mode="" class="img"></image>
				<view class="text">Android下载</view>
			</view>
			<view class="item2" @tap="downloadH5(2)">
				<image src="/static/login/ios.png" mode="" class="img"></image>
				<view class="text">Iphone下载</view>
			</view>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isCommand: true
			}
		},
		methods: {
			downloadApp(type) {
				if (type == 2) {
					plus.runtime.openURL("https://chat.huopeng.cc/tx-h5/#/pages/login/login");
					return
				}
				let url = "https://chat.huopeng.cc/download/app/tx.apk"
				plus.runtime.openURL(url);
			},
			downloadH5(type) {
				if (type == 2) {
					window.location.href = "https://chat.huopeng.cc/tx-h5/#/pages/login/login"
					return
				}
				window.location.href = "https://chat.huopeng.cc/download/app/tx.apk"
			},
			goback(){
				uni.switchTab({
					url:'/pages/mine/index'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.box {
		height: 100vh;
		background-image: url('/static/login/xztx-bkg.png');
		background-size: cover;
		background-repeat: no-repeat;

		.back {
			position: absolute;
			top: 120rpx;
			left: 28rpx;

			.back-img {
				width: 44rpx;
				height: 44rpx;
			}
		}
	}

	.command-box {
		background: #000000;
		position: fixed;
		width: 100%;
		height: 100%;
		opacity: 0.7;
		display: flex;
		flex-direction: column;
		align-items: center;
		z-index: 99;

		.img {
			width: 542rpx;
			height: 602rpx;
			margin-left: 110rpx;
			z-index: 999;
		}

		.know {
			width: 230rpx;
			height: 76rpx;
			border-radius: 38rpx;
			border: 2rpx solid #FFFFFF;
			color: #FFFFFF;
			text-align: center;
			line-height: 76rpx;
			margin-top: 180rpx;
		}
	}

	.top {
		// height: 438rpx;
		// background-image: url('/static/login/yq-topBkg.png');
		// background-size: cover;
		// background-repeat: no-repeat;
		text-align: center;

		.log-img {
			width: 422rpx;
			height: 92rpx;
			margin-top: 160rpx;
		}
	}

	.cart-box {
		width: 100%;
		text-align: center;
		margin-top: 60rpx;
		margin-bottom: 80rpx;

		.cart-img {
			width: 630rpx;
			height: 630rpx;
		}
	}

	.content {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.item1,
	.item2 {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 630rpx;
		height: 96rpx;
		border-radius: 50rpx;

		.img {
			width: 56rpx;
			height: 56rpx;
		}

		.text {
			font-weight: 600;
			font-size: 32rpx;
			color: #FFFFFF;
			margin-left: 16rpx;
		}
	}

	.item1 {
		background: #099C00;
	}

	.item2 {
		background-color: #2D2D2D;
		margin-top: 40rpx;
	}
</style>